<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>收藏夹 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 表单样式优化 */
        .form-label {
            font-weight: 500;
            color: #4b5563;
        }
        .form-input {
            transition: all 0.2s ease-in-out;
        }
        .form-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        /* 主内容区域样式 */
        main {
            display: flex;
            min-height: calc(100vh - 64px - 64px); /* 减去 header 和 footer 高度（假设各 64px） */
            width: 100%;
        }
        /* 侧边栏样式 */
        .sidebar {
            width: 256px; /* 保持当前宽度 */
            background-color: #fff;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }
        /* 内容区域样式 */
        .content-area {
            flex: 1;
            padding: 2rem;
            background-color: #f7fafc; /* 匹配背景色 */
        }
        /* 确保侧边栏内容区自适应 */
        .sidebar nav {
            flex-grow: 1;
        }
        /* 响应式布局 */
        @media (max-width: 640px) {
            .sidebar {
                display: none;
            }
            .content-area {
                padding: 1rem;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>
<!-- Main Content -->
<main>
    <!-- 侧边栏 -->
    <th:block th:replace="~{/buyer/sidebar.html}"></th:block>
    <!-- 内容区域 -->
    <div class="content-area">
    <!-- 仅在用户登录且角色为 BUYER 时显示收藏夹内容 -->
    <div th:if="${session.user != null and session.user.role == 'BUYER'}">
<!--        <h1 class="text-3xl font-bold mb-8 text-gray-800">收藏夹</h1>-->
        <div class="bg-white p-8 rounded-xl shadow-lg">
            <!-- 收藏列表 -->
            <table class="w-full table-auto">
                <thead>
                <tr class="bg-gray-100">
                    <th class="px-4 py-2 text-left text-gray-600">商品图片</th>
                    <th class="px-4 py-2 text-left text-gray-600">商品名称</th>
                    <th class="px-4 py-2 text-left text-gray-600">价格</th>
                    <th class="px-4 py-2 text-left text-gray-600">供应商</th>
                    <th class="px-4 py-2 text-left text-gray-600">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="favorite, iterStat : ${favorites}" class="border-b">
                    <td class="px-4 py-3">
                        <img th:src="${favorite.imageUrl} ?: '/uploads/default-product.jpg'" alt="Product" class="w-16 h-16 object-cover rounded">
                    </td>
                    <td class="px-4 py-3" th:text="${favorite.name}"></td>
                    <td class="px-4 py-3" th:text="${favorite.price} + ' 元/吨'"></td>
                    <td class="px-4 py-3" th:text="${favorite.supplierName}"></td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2">
                            <a th:href="@{/buyer/product/{id}(id=${favorite.id})}" class="flex items-center text-blue-600 hover:underline">
                                <i class="fas fa-eye mr-1"></i> 查看详情
                            </a>

                            <form th:action="@{/buyer/profile/favorites/remove/{id}(id=${favorite.favoriteId})}" method="post" class="inline">
                                <button type="submit" class="flex items-center text-red-600 hover:underline ml-2">
                                    <i class="fas fa-trash-alt mr-1"></i>
                                </button>
                            </form>
                        </div>

                    </td>
                </tr>
                <tr th:if="${favorites.isEmpty}">
                    <td colspan="5" class="px-4 py-3 text-center text-gray-600">暂无收藏</td>
                </tr>
                </tbody>
            </table>
            <!-- 分页 -->
            <div id="pagination" class="flex flex-col items-center mt-8 space-y-3">
                <div class="flex justify-center space-x-3">
                    <a th:href="@{/buyer/profile/favorites(page=${currentPage - 1}, size=${pageSize})}"
                       th:classappend="${currentPage == 1} ? 'bg-blue-600 text-white px-5 py-2 rounded-lg opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700'"
                       th:attr="disabled=${currentPage == 1} ? 'disabled' : null">上一页</a>
                    <div class="flex space-x-1">
                        <a th:each="i : ${#numbers.sequence(1, totalPages)}"
                           th:href="@{/buyer/profile/favorites(page=${i}, size=${pageSize})}"
                           th:classappend="${i == currentPage} ? 'bg-blue-600 text-white px-3 py-1 rounded-lg' : 'bg-gray-200 text-gray-700 px-3 py-1 rounded-lg hover:bg-blue-200'"
                           th:text="${i}"></a>
                    </div>
                    <a th:href="@{/buyer/profile/favorites(page=${currentPage + 1}, size=${pageSize})}"
                       th:classappend="${currentPage == totalPages} ? 'bg-blue-600 text-white px-5 py-2 rounded-lg opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700'"
                       th:attr="disabled=${currentPage == totalPages} ? 'disabled' : null">下一页</a>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>

<script src="/js/jquery-latest.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>